---
title: Guidelines
redirect_from:
  - /utilities/badgeprimitive/
---

import PrimitivesFreedomSnippet from "snippets/primitives-freedom.mdx";
import PrimitivesStillSnippet from "snippets/primitives-still.mdx";

<ReactExample exampleId="BadgePrimitive-default" />

## When to use

- To add a [badge](/components/information/badge/) with custom styling.

## When not to use

- To offer an action in a component with custom styling---use
  a [button primitive](/components/primitives/buttonprimitive/).

## Component status

<ComponentStatus component="BadgePrimitive" />

## Behavior

<PrimitivesFreedomSnippet component="badge" />

<PrimitivesStillSnippet component="badge" section="information" />
